/* Base styles for .cms30-header-menu */
.cms30-header .menu-col{
    max-width: var(--cms30-header-menu-col-max-width) !important;
    width: var(--cms30-header-menu-col-width, 100%) !important;
    order:var(--cms30-header-menu-col-order);
    position: var(--cms30-header-menu-col-position);
}
.cms30-header-menu {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--cms30-header-menu-col-bgcolor, transparent);
    padding: var(--cms30-header-menu-padding, 8px);
    justify-content: var(--cms30-header-menu-justify-content, end);
}
.cms30-header-menu.hmenu .submenu {
    height: auto!important;
}
.cms30-header-menu.vmenu .submenu {
    width: 100% !important;
    height: 0 ;
}
.cms30-header-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--cms30-hm-ul-gap, 12px);
    align-items: var(--cms30-hm-align-items, center);
    justify-content: var(--cms30-hm-justify-content, end);
}
.cms30-header-menu ul li {
    list-style: none;
    white-space: nowrap;
}
.cms30-header-menu ul.menu-level-1 > li {
    position: relative;
}

.cms30-header-menu:focus-within li:has(> a.focus)::after{
    border-color:var(--hicolor) !important;
}

/* Level 1 Menu Links */
.cms30-header-menu ul.menu-level-1 > li > a {
    text-decoration: none;
    color: var(--cms30-header-li-level1-font-color, var(--color));
    padding: var(--cms30-header-li-level1-padding-t, 8px) var(--cms30-header-li-level1-padding-r, 16px) var(--cms30-header-li-level1-padding-b, 8px) var(--cms30-header-li-level1-padding-l, 16px);
    display: block;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Level 2 Menu Links */
.cms30-header-menu .submenu.menu-level-2 > ul > li > a {
    text-decoration: none;
    color: var(--cms30-header-li-level2-font-color,var(--cms30-header-li-level1-font-color, var(--color))); 
    padding: var(--cms30-header-li-level2-padding-t,var(--cms30-header-li-level1-padding-t, 8px)) var(--cms30-header-li-level2-padding-r,var(--cms30-header-li-level1-padding-r, 16px)) var(--cms30-header-li-level2-padding-b,var(--cms30-header-li-level1-padding-b, 8px)) var(--cms30-header-li-level2-padding-l,var(--cms30-header-li-level1-padding-l, 16px));
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Level 3 Menu Links */
.cms30-header-menu .submenu.menu-level-3 ul li a {
    text-decoration: none;
color: var(--cms30-header-li-level2-font-color,var(--cms30-header-li-level1-font-color, var(--color))); 
    padding: var(--cms30-header-li-level2-padding-t,var(--cms30-header-li-level1-padding-t, 8px)) var(--cms30-header-li-level2-padding-r,var(--cms30-header-li-level1-padding-r, 16px)) var(--cms30-header-li-level2-padding-b,var(--cms30-header-li-level1-padding-b, 8px)) var(--cms30-header-li-level2-padding-l,var(--cms30-header-li-level1-padding-l, 16px));
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Level 2 Links in Vertical Menu */
.cms30-header-menu.vmenu .submenu.menu-level-2 ul li a {
    text-decoration: none;
    color: var(--color);
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Submenu Level 2 */
.cms30-header-menu .submenu.menu-level-2 {
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    z-index: 10;
}

.cms30-header-menu.hmenu .submenu.menu-level-2 {
    display: none;
}
.cms30-header-menu .submenu.menu-level-2 > ul,
.cms30-header-menu .submenu.menu-level-3 ul {
    margin: 0;
    padding: 0;
    flex-direction: column; 
    gap: var(--cms30-header-ul-level2-gap, 1px);
}
.cms30-header-menu .submenu.menu-level-2 ul li {
    list-style: none;
}

/* Submenu Level 3 */
.cms30-header-menu .submenu.menu-level-2 .submenu {
    position: absolute;
    top: 0%;
    left: 100%;
    flex-direction: column;
    z-index: var(--cms30-header-z-index, 10);
    padding: 0px 4px;
    width: max-content;
}
.cms30-header-menu.hmenu .submenu.menu-level-3 {
    display: none;
}
.cms30-header-menu .submenu.menu-level-3 ul li {
    list-style: none;
}

/* Submenu Level 4 */
.cms30-header-menu .submenu.menu-level-4 {
    display: none;
}

/* Styles for .haschildren Items */
.cms30-header-menu .submenu > ul > li.haschildren > a {
    padding-inline-end: 2rem;
    position: relative;
}
.cms30-header-menu.hmenu ul  li.haschildren::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translate(0%, -50%) rotate(45deg);
    transition: all 0.3s ease;
    transform-origin: center;
    border-top: 2px solid var(--cms30-header-li-level1-font-color, var(--color));
    border-right: 2px solid var(--cms30-header-li-level1-font-color, var(--color));
    width: 0.5rem;
    height: 0.5rem;
    font-size: var(--cms30-header-li-level1-font-size, 1.2rem);
}

.cms30-header-menu:focus, .cms30-header-menu:focus a.focus {
    outline: 1px dashed var(--hicolor)!important;
    color: var(--hicolor) !important;
}

/* Horizontal Menu */
.cms30-header-menu.hmenu ul.menu-level-1 li:hover > .submenu.menu-level-2,
.cms30-header-menu.hmenu .submenu.menu-level-2 > ul > li:hover > .submenu.menu-level-3 {
    display: flex;
}
.cms30-header-menu.hmenu ul.menu-level-1 > li:hover > .submenu, .cms30-header-menu.hmenu ul.menu-level-1 > li.keepopen > .submenu {
    display: flex;
    min-width: 100%;
}
.cms30-header-menu.hmenu ul .submenu.open {
    display: flex;
}
.cms30-header-menu.hmenu .submenu.menu-level-2 > ul li:hover > .submenu {
    display: flex;
}
.cms30-header-menu .submenu.submenu.menu-level-1 > ul > li {
    position: relative;
    border-block-end: 1px solid transparent;
    background: linear-gradient(to right, var(--cms30-header-li-level1-hover-underline-color,var(--hicolor)) 0%, var(--cms30-header-li-level1-hover-underline-color,var(--hicolor)) 100%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% var(--cms30-header-li-level1-hover-underline-width,1px);
    transition: background-size 0.3s ease;
    background-color: var(--cms30-header-li-level1-bgcolor, transparent);
    box-sizing: border-box;
    font-size: var(--cms30-header-li-level1-font-size, 1.2rem);
    font-family: var(--cms30-header-li-level1-font-family);
    border: var(--cms30-header-li-level1-border-width, 1px) var(--cms30-header-li-level1-border-style, solid) color-mix(in srgb, var(--cms30-header-li-level1-border-color, transparent) var(--cms30-header-li-level1-border-opacity, 50%), transparent);
    border-radius: var(--cms30-header-li-level1-border-radius, 4px);
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-1 > ul > li:hover, .cms30-header-menu.hmenu li.menu-active, .cms30-header-menu.hmenu li.keepopen{
    background-color: var(--cms30-header-li-level1-hover-bgcolor);
    background-size: 100% var(--cms30-header-li-level1-hover-underline-width,1px);
}
.cms30-header-menu .submenu.submenu > ul > li.menu-active > a,.cms30-header-menu .submenu.submenu > ul > li.menu-active::after,.cms30-header-menu li.keepopen > a, .cms30-header-menu .submenu.submenu > ul > li:has(li.menu-active) > a{
    color: var(--cms30-header-li-level1-active-font-color, var(--hicolor));
    
}
.cms30-header-menu .submenu.submenu > ul > li.menu-active::after, .cms30-header-menu .submenu.submenu > ul > li:has(li.menu-active)::after{
    border-color: var(--hicolor);
}
.cms30-header-menu .submenu.submenu.menu-level-1 > ul > li:hover > a {
    color: var(--cms30-header-li-level1-hover-font-color, var(--hicolor));
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-2 ul li,
.cms30-header-menu.hmenu .submenu.submenu.menu-level-3 ul li {
    position: relative;
    border-block-end: 1px solid transparent;
    background: linear-gradient(to right, var(--cms30-header-li-level2-hover-underline-color,var(--cms30-header-li-level1-hover-underline-color,var(--hicolor))) 0%, var(--cms30-header-li-level2-hover-underline-color,var(--cms30-header-li-level1-hover-underline-color,var(--hicolor))) 100%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% var(--cms30-header-li-level2-hover-underline-width, var(--cms30-header-li-level1-hover-underline-width,1px));
    transition: background-size 0.3s ease;
    background-color: var(--cms30-header-li-level2-bgcolor, var(--cms30-header-li-level1-bgcolor, var(--bgcolor)));
    min-width: 100%;
    box-sizing: border-box;
    font-size: var(--cms30-header-li-level2-font-size,var(--cms30-header-li-level1-font-size, 1.2rem));
    font-family: var(--cms30-header-li-level2-font-family,var(--cms30-header-li-level2-font-family));
    border: var(--cms30-header-li-level2-border-width,var(--cms30-header-li-level1-border-width, 1px)) var(--cms30-header-li-level2-border-style,var(--cms30-header-li-level1-border-style, solid)) color-mix(in srgb, var(--cms30-header-li-level2-border-color,var(--cms30-header-li-level1-border-color, transparent)) var(--cms30-header-li-level2-border-opacity,var(--cms30-header-li-level1-border-opacity, 50%)), transparent);
    border-radius: var(--cms30-header-li-level2-border-radius,var(--cms30-header-li-level1-border-radius, 0px));
}
.cms30-header-menu .submenu.submenu.menu-level-2 ul li:hover,
.cms30-header-menu .submenu.submenu.menu-level-3 ul li:hover {
    background-color: var(--cms30-header-li-level2-hover-bgcolor, var(--cms30-header-li-level1-hover-bgcolor, var(--bgcolor2)));
    background-size: 100% var(--cms30-header-li-level2-hover-underline-width,var(--cms30-header-li-level1-hover-underline-width,1px));
}
.cms30-header-menu .submenu.submenu.menu-level-2 ul li:hover > a,
.cms30-header-menu .submenu.submenu.menu-level-3 ul li:hover > a {
    color: var(--cms30-header-li-level2-hover-font-color, var(--cms30-header-li-level1-hover-font-color, var(--hicolor)));
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-1 ul li:hover::after, .cms30-header-menu.hmenu ul li.keepopen::after {
    border-color: var(--cms30-header-li-level1-hover-font-color, var(--hicolor)) !important;
    transform: translate(0%, -50%) rotate(135deg)!important;
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-2 ul li:hover::after {
    border-color: var(--hicolor) !important;
    transform: translate(0%, -50%) rotate(225deg)!important;
}

/* Vertical Menu */
.cms30-header-menu.vmenu ul > li {
    position: static;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.cms30-header-menu.vmenu .submenu.menu-level-2,
.cms30-header-menu.vmenu .submenu.menu-level-3 {
    position: static;
    flex-direction: column; 
    padding-top: 10px; 
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}
.cms30-header-menu.vmenu ul.menu-level-1 > li.keepopen > .submenu.menu-level-2,
.cms30-header-menu.vmenu ul.menu-level-2 > li.keepopen > .submenu.menu-level-3 {
    display: flex !important;
    background-color: var(--cms30-header-submenu-vmenu-background, var(--bgcolor));
    width: 100%;
}
.cms30-header-menu.vmenu .submenu ul {
    display: flex;
    flex-direction: column;
    gap: var(--cms30-header-submenu-vmenu-ul-gap, 12px);
    margin: 0;
    background: transparent;
}
.cms30-header-menu.vmenu ul.menu-level-1 > li.haschildren,
.cms30-header-menu.vmenu .submenu.menu-level-2 > ul > li.haschildren {
    padding-inline-end: 0rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
.cms30-header-menu.vmenu ul.menu-level-1 > li.haschildren > div,
.cms30-header-menu.vmenu .submenu.menu-level-2 > ul > li.haschildren > div {
    order: 3;
}
.cms30-header-menu.vmenu ul li.haschildren > a {
    flex-grow: 1;
    border-inline-end: 1px solid var(--bgcolor2);
}
.cms30-header-menu.vmenu  a {
    outline-offset: -1px;
}

.cms30-header-menu.vmenu ul.menu-level-3 li.haschildren > a {
    border-inline-end: none;
}
.cms30-header-menu.vmenu .submenu.submenu.menu-level-1 > ul > li:hover {
    background-size: 100% var(--cms30-header-li-level1-hover-underline-width,1px);
}
.cms30-header-menu.vmenu .submenu ul.menu-level-1 > li.haschildren::after,
.cms30-header-menu.vmenu .submenu ul.menu-level-2 > li.haschildren::after {
    content: "\f107";
    font-family: 'FontAwesome';
    position: static;
    width: 10%;
    padding: 10px 15px;
    transform: rotate(-90deg);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.cms30-header-menu.vmenu .submenu ul li:hover::after {
    color: var(--hicolor) !important;
    background: transparent;
}
.cms30-header-menu.vmenu .submenu ul li.keepopen::after {
    transform: rotate(90deg) !important;
}
.cms30-header-menu.vmenu::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cms30-header-menu.vmenu:has(.submenu.menu-level-1.vertical.visible)::before {
    opacity: 1;
}
.cms30-header-menu .submenu.menu-level-1.vertical {
    position: fixed;
    top: 0;
    right: 0%;
    visibility: hidden;
    height: 100vh;
    width: var(--cms30-header-submenu-vmenu-width, 90%);
    max-width: var(--cms30-header-submenu-vmenu-max-width, 400px);
    background-color: var(--cms30-header-submenu-vmenu-background, var(--bgcolor));
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    transform:translateX(100%);
    transition: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: var(--cms30-header-submenu-vmenu-justify-content, flex-start);
    align-items: var(--cms30-header-submenu-vmenu-align-items, center);
    padding-inline: var(--cms30-header-submenu-vmenu-padding-inline, 0.5rem);
    box-sizing: border-box;
    opacity: 0;
    transition: transform 0.3s ease, height 0s !important;
}
.cms30-header-menu .submenu.menu-level-1.vertical.visible {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;    
    height: 100% !important;
}
.cms30-header-menu .submenu.menu-level-1.vertical[data-open-direction="left"]{
    right: 100%;
    transform:translateX(-100%);
}
.cms30-header-menu .submenu.menu-level-1.vertical.visible[data-open-direction="left"] {
    transform: translateX(100%);
}
.cms30-header-menu .submenu.menu-level-1.vertical > ul {
    display: flex;
    flex-direction: var(--cms30-header-submenu-vmenu-ul-flex-direction, column);
    gap: var(--cms30-header-submenu-vmenu-ul-gap, 12px);
    width:  100%;
    max-width: var(--cms30-header-submenu-vmenu-ul-max-width, 400px);
    padding:  0;
    margin-block: var(--cms30-header-submenu-vmenu-ul-margin-block-start, 100px) var(--cms30-header-submenu-vmenu-ul-margin-block-end, 200px);
    list-style:none;
}

.cms30-header-menu .submenu.menu-level-1 .close-icon {
    display: none;
    position: absolute;
    top: var(--cms30-header-vmenu-close-icon-top, 12px);
    right: var(--cms30-header-vmenu-close-icon-right, 12px);
    font-size: var(--cms30-header-vmenu-close-icon-font-size, 24px);
    color:  var(--cms30-header-vmenu-close-icon-font-size, var(--color));
    background-color:  var(--cms30-header-vmenu-close-icon-bgcolor, transparent);
    border: var(--cms30-header-vmenu-close-icon-border-width, 0px) 
        var(--cms30-header-vmenu-close-icon-border-style, solid) 
        var(--cms30-header-vmenu-close-icon-border-color, var(--color));

    border-radius: var(--cms30-header-vmenu-close-icon-border-radius, 4px);

    padding: var(--cms30-header-vmenu-close-icon-padding-top, 8px) 
             var(--cms30-header-vmenu-close-icon-padding-right, 8px) 
             var(--cms30-header-vmenu-close-icon-padding-bottom, 8px)
              var(--cms30-header-vmenu-close-icon-padding-left, 8px);
    cursor: pointer;
    z-index: 11;
}
.cms30-header-menu .submenu.menu-level-1 .close-icon:hover {
    color:  var(--cms30-header-vmenu-close-icon-hover-font-size, var(--hicolor));
    background-color:  var(--cms30-header-vmenu-close-icon-hover-bgcolor, var(--bgcolor2));
}
.cms30-header-menu .submenu.menu-level-1.vertical.visible .close-icon {
    display: block;
}


/* Menu Switch */
.cms30-header .menu-switch {
    display: none;
    width: var(--cms30-header-menu-switch-width, 32px);
    height: var(--cms30-header-menu-switch-height, 26px);
    align-content: center;
    position: relative;
    cursor: pointer;
    text-align: center;
    color: var(--cms30-header-menu-switch-icon-color, var(--color));
    transition: all 0.3s ease-in-out;
    background-color: var(--cms30-header-menu-switch-bg, transparent);

    border: var(--cms30-header-menu-switch-border-width, 0px) 
            var(--cms30-header-menu-switch-border-style, solid) 
            var(--cms30-header-menu-switch-border-color, var(--color));

    border-radius: var(--cms30-header-menu-switch-border-radius, 4px);

    padding-top: var(--cms30-header-menu-switch-padding-top, 8px);
    padding-right: var(--cms30-header-menu-switch-padding-right, 8px);
    padding-bottom: var(--cms30-header-menu-switch-padding-bottom, 8px);
    padding-left: var(--cms30-header-menu-switch-padding-left, 8px);
}
.cms30-header .menu-switch:has(i),.cms30-header .menu-switch:has(div),.cms30-header .menu-switch:has(span) {
        height: var(--cms30-header-menu-switch-height, 42px);
        border-block: none;
}
.cms30-header .menu-switch:before {
    content: "";
    width: var(--cms30-header-menu-switch-line-width, 28px);
    height: var(--cms30-header-menu-switch-icon-height, 20px);
    border-block: var(--cms30-header-menu-switch-line-height, 2px) var(--cms30-header-menu-switch-line-style, solid) var(--cms30-header-menu-switch-icon-color, var(--color));
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    transition: all 0.3s ease-in-out;
}
.cms30-header .menu-switch:after {
    content: "";
    width: var(--cms30-header-menu-switch-line-width, 28px);
    border-block-end: var(--cms30-header-menu-switch-line-height, 2px) var(--cms30-header-menu-switch-line-style, solid) var(--cms30-header-menu-switch-icon-color, var(--color));
    position: absolute;
    bottom: 50%;
    left: var(--cms30-header-menu-switch-line--middle-left, 35%);
    transform: translate(-50%, 50%);
    transition: all 0.3s ease-in-out;
}
.cms30-header .menu-switch:has(i):after,.cms30-header  .menu-switch:has(div):after, .cms30-header  .menu-switch:has(span):after,.cms30-header .menu-switch:has(i):before, .cms30-header .menu-switch:has(div):before, .cms30-header .menu-switch:has(span):before  {
    display:none;
}
.cms30-header .menu-switch * {
    font-size: var(--cms30-header-menu-switch-font-size, 2rem);
    color: var(--cms30-header-menu-switch-icon-color, var(--color));
}
.cms30-header .menu-switch:hover *,.cms30-header .menu-switch:hover:before,.cms30-header .menu-switch:hover:after {
    color: var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor));
    border-color: var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor));
}
.cms30-header .menu-switch:hover{
    color: var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor));
    border-color: var(--cms30-header-menu-switch-hover-border-color, var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor)));
    background-color: var(--cms30-header-menu-switch-hover-bg);
}